<template>
  <a-modal
    :visible='visible'
    title="车辆定位"
    width="100%"
    :footer="null"
    :mask-closable='false'
    :destroy-on-close='true'
    :style="{ top: '0px' }"
    @update:visible='updateVisible'
  >
    <div class="ele-body">
      <div>
        <baidu-map
          ak="OsoBFa0ZqPGS0UpqiiF0rVHsBp0kfQ5F"
          class="map"
          style="height: 100vh;"
          :zoom="12"
          :scroll-wheel-zoom="true"
          :center="{lng: point.lng, lat: point.lat}"
        >
          <bm-marker :position="{lng: point.lng, lat: point.lat}" :dragging="true" :icon="{url: vehicleRealtimeData.iconUrl, size: {width: 45, height: 20}}"></bm-marker>
        </baidu-map>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { BaiduMap, BmMarker } from 'vue-baidu-map-3x'
import {VehicleRealtimeDataApi} from "@/api/property/vechile/VehicleRealtimeDataApi";

export default {
  name: 'VehicleManagerRunningstateBmpoint',
  components: {
    BaiduMap,
    BmMarker
  },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    data: Object
  },
  emits: ['update:visible'],
  data() {
    return {
      point : { lng: 105.000, lat: 38.000 },
      vehicleRealtimeData : {},
      loadRealtimeDataTimer : null,
    };
  },
  created() {
    this.getRealtimeData();
    this.loadRealtimeDataTimer = setInterval(this.getRealtimeData, 30000);
  },
  beforeUnmount() {
    clearInterval(this.loadRealtimeDataTimer);
  },
  methods: {
    getRealtimeData() {
      let that = this;
      VehicleRealtimeDataApi.detail({"vehicleId" : that.data.vehicleId}).then(result => {
        let formatResult = result || {};
        let stateName = 'unknown';
        let iconUrl = '';
        if (formatResult.state == 'running') {
          stateName = '行驶中';
          iconUrl = 'https://moreycow.oss-cn-hangzhou.aliyuncs.com/vechile/icon/running.png';
        } else if (formatResult.state == 'ignition_off') {
          stateName = '熄火';
          iconUrl = 'https://moreycow.oss-cn-hangzhou.aliyuncs.com/vechile/icon/ignition_off.png';
        } else if (formatResult.state == 'idling') {
          stateName = '怠速';
          iconUrl = 'https://moreycow.oss-cn-hangzhou.aliyuncs.com/vechile/icon/idling.png';
        } else if (formatResult.state == 'offline') {
          stateName = '设备离线';
          iconUrl = 'https://moreycow.oss-cn-hangzhou.aliyuncs.com/vechile/icon/offline.png';
        } else if (formatResult.state == 'ignition_on') {
          stateName = '点火启动';
          iconUrl = 'https://moreycow.oss-cn-hangzhou.aliyuncs.com/vechile/icon/running.png';
        }
        formatResult.iconUrl = iconUrl;
        formatResult.stateName = stateName;
        that.point = {
          lng : formatResult.bdLongitude,
          lat : formatResult.bdLatitude
        };
        console.log(that.point);
        that.vehicleRealtimeData = formatResult;
        console.log(that.vehicleRealtimeData);
      });
    },

    clickHandler(e){
      alert(`单击点的坐标为：${e.point.lng}，${e.point.lat}`);
    },
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
};
</script>
